<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { ref, onMounted } from 'vue'
import { useTypeStore } from '@/stores/index.js'
import { Delete, Edit } from '@element-plus/icons-vue'
import { useDelTypeService } from '@/api/request.js'
import MyDialog from '@/components/MyDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const title = ref('分类标题')
const typeStore = useTypeStore()
// 组件挂载，获取分类列表保持到pinia中
onMounted(() => {
  isLoading.value = true
  typeStore.getTypeList()
  // console.log(111, typeStore.typeList)
  isLoading.value = false
})

// 加载标记变量
const isLoading = ref(true)

// ---------------

// 弹框组件实例
const dialog = ref()
// 修改分类的回调
const onEditType = (row) => {
  console.log('edit')
  dialog.value.open(row)
}
// 删除分类的回调
const onDelType = async (row) => {
  // console.log('del')
  // useDelTypeService()
  ElMessageBox.confirm('您确定要删除该文章分类吗', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await useDelTypeService(row.id)
    await useTypeStore().getTypeList()
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
  })
}
const onAddType = () => {
  dialog.value.open({})
}
</script>

<template>
  <PageContainer :title="title">
    <template #extra>
      <el-button type="primary" @click="onAddType">添加分类</el-button>
    </template>
    <template #main>
      <el-table
        v-loading="isLoading"
        :data="typeStore.typeList"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>
        <el-table-column prop="cate_name" label="分类名称"></el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
        <el-table-column width="100" label="操作">
          <template #default="{ row }">
            <el-button
              :icon="Edit"
              circle
              plain
              type="primary"
              @click="onEditType(row)"
            ></el-button>
            <el-button
              :icon="Delete"
              circle
              plain
              type="danger"
              @click="onDelType(row)"
            ></el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>
    </template>
  </PageContainer>
  <MyDialog ref="dialog"></MyDialog>
</template>

<style scoped lang="less"></style>
